import { useRef } from 'react';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { ProFormDateRangePicker } from '@ant-design/pro-form';
import { Button, Popconfirm, message } from 'antd';
import Add from './components/add';
import Edit from './components/edit';
import AddEnvLocation from './components/envLocation';
import { IRouteProps, history } from 'umi';
import { getProjectList, deleteProject } from '@/api';
import { TableListItem, AppParams } from './interface';

const requestAppList = async (params: AppParams) => {
  try {
    const res = await getProjectList({ ...params });

    return {
      data: res?.data?.data || [],
      success: true,
    };
  } catch (error) {
    return {
      data: [],
      error: true,
    };
  }
};

const remove = async (id?: string, action?: ActionType) => {
  try {
    await deleteProject(id);

    message.success('删除成功');
    action?.reload();
  } catch (error) {
    message.error(error.message);
  }
};

export default (props: IRouteProps) => {
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '应用名称',
      dataIndex: 'projectName',
    },
    {
      title: '仓库地址',
      dataIndex: 'projectGitUrl',
      render: (text) => {
        return (
          <Button
            type="link"
            title={text as string}
            onClick={() => {
              window.open(text as string);
            }}
          >
            {text}
          </Button>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
      renderFormItem: () => {
        return (
          <ProFormDateRangePicker
            name="createTime"
            placeholder="请选择创建日期"
          />
        );
      },
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (text, record, _, action) => [
        <Edit key="edit" record={record} action={actionRef.current}>
          <Button type="link">查看</Button>
        </Edit>,
        <Button
          key="pub"
          type="link"
          onClick={() => {
            history.push(`/project/iteration/${record.projectId}`);
          }}
        >
          迭代
        </Button>,
        <AddEnvLocation
          id={record.projectId}
          action={action}
          envLocation={record.envLocation || []}
          key="envLocation"
        >
          <Button key="detail" type="link">
            设置环境链接
          </Button>
        </AddEnvLocation>,
        <TableDropdown
          key={'delete'}
          onSelect={(key) =>
            key === 'delete' && remove(record.projectId, action)
          }
          menus={[
            {
              name: '详情',
              key: 'detail',
            },
            {
              name: '删除',
              key: 'delete',
            },
          ]}
        />,
      ],
    },
  ];

  return (
    <div>
      <ProTable
        actionRef={actionRef}
        headerTitle="计费中心"
        columns={columns}
        request={requestAppList}
        toolBarRender={() => [
          actionRef.current && <Add action={actionRef.current} />,
        ]}
      />
    </div>
  );
};
